<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>交易流水查询</title>

    <link href="static/css/css2.css" rel="stylesheet">
    <link href="static/css/boxicons.min.css" rel='stylesheet'>
    <link rel="stylesheet" href="static/css/insha-style.css">

</head>

<body>

<div class="main" id="app">
    <div class="sidebar">
        <div class="logo_content">
            <div class="logo">
                <div class="logo_name">
                    <a href="#">
                        <i class='bx bxs-bank'></i>
                        银行业务管理系统
                    </a>
                </div>
            </div>
            <i class='bx bx-menu' id="toggle-menu-btn"></i>
        </div>
        <ul class="nav_list">

            <li>
                <a href="online.html">
                    <i class='bx bx-yen'></i>
                    <span class="links_name">网上银行</span>
                </a>
                <span class="tooltip">网上银行</span>
            </li>
            <li>
                <a href="counter.html">
                    <i class='bx bxs-user-account'></i>
                    <span class="links_name">银行柜面</span>
                </a>
                <span class="tooltip">银行柜面</span>
            </li>

        </ul>

    </div>
    <div class="home_content">
        <div class="text">银行柜面</div>
        <div class="rg_layout10">
            <div class="rg_left">
                <p>交易流水查询</p>
                <p>TRANSACTION FLOW</p>

            </div>
            <div class="rg_center">
                <div class="rg_form">
                    <!--定义表单 form-->
                    <form action="#" method="">
                        <table id="tbe10">
                            <tr>
                                <td class="td_left"><label for="idCard">银行卡号</label></td>
                                <td class="td_right"><input type="text" name="idCard" id="idCard"
                                                            v-model="idCard" readonly></td>
                            </tr>
                            <tr>
                                <td class="td_left1">开始时间&nbsp&nbsp<input type="date" name="dateOpen" id="dateOpen"
                                                                              placeholder="年/月/日" v-model="dateOpen"
                                                                              @change="open()"></td>
                                <td class="td_right">结束时间&nbsp&nbsp<input type="date" name="dateClose"
                                                                              id="dateClose" placeholder="年/月/日"
                                                                              v-model="dateClose" @change="open()"
                                                                              @click="close()">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left1">业务类型&nbsp&nbsp<select id="sel" v-model="sel" @change="st()">
                                    <option selected>存款</option>
                                    <option>取款</option>
                                    <option>转账付款</option>
                                    <option>结息</option>
                                    <option>转账收款</option>
                                </select></td>
                                <td class="td_right"><input type="text" name="text" id="text"
                                                            placeholder="🔍账户姓名/账号" v-model="text">
                                    <button @click="search()">搜索</button>
                                </td>
                            </tr>
                        </table>
                        <div>
                            <table class="ta" border="1" cellspacing="0">
                                <tr class="ta0">
                                    <td>流水号</td>
                                    <td>交易时间</td>
                                    <td>交易金额</td>
                                    <td>银行卡号</td>
                                    <td>业务类型</td>
                                    <td>交易后余额</td>
                                    <td>对方账户</td>
                                    <td>对方卡号</td>
                                    <td>备注</td>
                                </tr>
                                <tr v-for="(item,index) in list">
                                    <td>{{item.serialNo}}</td>
                                    <td>{{item.transactionTime}}</td>
                                    <td>{{item.transactionBalance}}</td>
                                    <td>{{item.bankNo}}</td>
                                    <td v-if="item.businessType==0">存款</td>
                                    <td v-if="item.businessType==1">取款</td>
                                    <td v-if="item.businessType==2">转账付款</td>
                                    <td v-if="item.businessType==3">结息</td>
                                    <td v-if="item.businessType==4">转账收款</td>
                                    <td>{{item.balance}}</td>
                                    <td>{{item.payee}}</td>
                                    <td>{{item.collectionCard}}</td>
                                    <td>{{item.remark}}</td>
                                </tr>
                            </table>
                            <p>
                                <a href="#" id="one" @click="one()">首页</a>&nbsp&nbsp<a href="#"
                                                                                         @click="up()">上一页</a>&nbsp&nbsp{{page}}&nbsp&nbsp<a
                                    href="#"
                                    @click="down()">下一页</a>&nbsp&nbsp<a href="#" @click="last()">尾页</a>
                                    
                            </p>
                        </div>


                    </form>


                </div>

            </div>
<button id="bn10" @click="back1()">返回</button>

        </div>
    </div>

</div>

<script src="static/js/scripts.js"></script>
<script src="static/js/vue.js"></script>
<script src="static/js/axios.min.js"></script>
<script>
    // window.onload = function () {


    //     var searchUrl = window.location.href;
    //     var searchData = searchUrl.split("="); //截取 url中的“=”,获得“=”后面的参数
    //     var searchText = decodeURI(searchData[1]); //decodeURI解码
    //     console.log(searchText)
    //     app.idCard = searchText

    //     app.pt()


    //     if (app.page == 1) {
    //         let one = document.querySelector("#one");
    //         one.style = "color:blue"
    //     }

    // }
    const app = new Vue({
        el: "#app",
        data: {
            // number: "",
            // date: null,
            // type: "",
            // payee: "",
            idCard: localStorage.getItem("bankNo"),
            // accounts: null,
            // balance: null,
            // idCard1: "",
            // remark: "",
            dateOpen: null,
            dateClose: null,
            text: "",
            //下拉栏业务类型值
            sel: "",
            //当前页
            page: 1,
            size: 6,
            list: [],
            //代表输入为姓名
            text1: "",
            //代表输入为银行卡号
            text2: "",
            // 总页数
            total: null

        },
        mounted() {
            this.idCard = localStorage.getItem("bankNo")
            this.pt()
        },
        methods: {

            back1() {
                location.href = "onlineindex.html"
            },

            //发送请求的方法，可以复用
            pt() {
                if (this.idCard == "") {
                    alert("银行卡号请勿为空")
                } else {
                    let rule = new RegExp("(^[0-9]*$)");
                    if (rule.test(this.text) == true) {
                        this.text2 = this.text
                    } else {
                        this.text1 = this.text
                    }
                    let sel1=null
                    if (this.sel == "存款") {
                        sel1 = 0
                    } else if (this.sel == "取款") {
                        sel1 = 1
                    } else if (this.sel == "转账付款") {
                        sel1 = 2
                    } else if (this.sel == "结息") {
                        sel1= 3
                    } else if (this.sel == "转账收款") {
                        sel1 = 4
                    } else {
                        sel1 = '';
                    }
                    let this_ = this;

                    axios({
                        method: "post",
                        url: "http://localhost:8080/flow/userList",
                        data: {
                            bankNo: this.idCard,
                            page: this.page,
                            pageSize: this.size,
                            transactionTime: this.dateOpen,
                            endTime: this.dateClose,
                            businessType: sel1,
                            name: this.text1,
                            account: this.text2
                        },
                        headers: {
                            "Content-Type": "application/json"
                        }
                    }).then(res => {
                        this.list = res.data.data.list
                        this.total = res.data.data.total
                        this.text1='',
                        this.text2=''
                    })
                }
            },
            //转换时间格式
            format(date) {

                var year = date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                // 拼接
                return year + "-" + month + "-" + day;
            },


            // ic() {
            //     if ((this.idCard.length != 16 && this.idCard.length != 17 && this.idCard.length != 19) && this.idCard != "") {
            //         let rule = new RegExp("(^([1-9]{1})(\d{16}|\d{17}\d{19})$)")
            //         if (rule.test(this.idCard) == false) {
            //             alert("您的银行卡格式不正确，请重新输入")
            //         }

            //     }
            // },
            btu() {

                // pt()
                if (this.idCard == "") {
                    alert("银行卡号请勿为空")
                } else {
                    let rule = new RegExp("(^[0-9]*$)");
                    if (rule.test(this.text) == true) {
                        this.text2 = this.text
                    } else {
                        this.text1 = this.text
                    }
                    let sel1=null
                    if (this.sel == "存款") {
                        sel1 = 0
                    } else if (this.sel == "取款") {
                        sel1 = 1
                    } else if (this.sel == "转账付款") {
                        sel1 = 2
                    } else if (this.sel == "结息") {
                        sel1= 3
                    } else if (this.sel == "转账收款") {
                        sel1 = 4
                    } else {
                        sel1 = ''
                    }


                    axios({
                        method: "post",
                        url: "http://localhost:8080/flow/userList",
                        data: {
                            bankNo: this.idCard,
                            page: this.page,
                            pageSize: this.size,
                            transactionTime: this.dateOpen,
                            endTime: this.dateClose,
                            businessType: sel1,
                            name: this.text1,
                            account: this.text2
                        },
                        headers: {
                            "Content-Type": "application/json"
                        }
                    }).then(res => {
                        this.list = res.data.data.list
                        this.total = res.data.data.total
                        this.text1='',
                        this.text2=''
                    })
                }
            },
            close() {
                if (this.dateOpen == null) {
                    alert("请选择开始时间")

                }
            },
            open() {
                if (this.idCard == "") {
                    alert("银行卡号请勿为空")
                    this.dateOpen = null;
                    this.dateClose = null;


                } else {
                    if (this.dateOpen != null && this.dateClose != null) {
                        let date1 = new Date(this.dateOpen);
                        // console.log(date1.getDate()+90);
                        let date2 = new Date(this.dateOpen);
                        date2.setDate(date1.getDate() + 90);
                        let date3 = new Date(this.dateClose)
                        if (date1.getTime() > date3.getTime()) {
                            alert("开始时间请勿超过结束时间")
                            this.dateClose = null;
                        } else {
                            if (date2.getTime() < date3.getTime()) {

                                alert("交易流水查询最多不能超过三个月")
                                this.dateClose = null;

                            } else {
                                this.dateOpen = this.format(date1)
                                this.dateClose = this.format(date3)
                                this.pt();
                            }
                        }
                    }

                }
            },
            st() {
                if (this.idCard == "") {
                    alert("银行卡号请勿为空")
                }else{
                    this.pt();
                }

            },
            search() {
                if (this.idCard == "") {
                    alert("银行卡号请勿为空")
                } else {
                    this.pt();

                }
            },
            one() {
                this.page = 1;
                this.pt()
            },
            up() {
                if (this.page == 1) {
                    this.page = 1;
                } else {
                    this.page = this.page - 1;
                }
                this.pt()

            },
            down() {
                var number = Math.round(this.total / this.size)
                if (this.page == number) {

                } else {
                    this.page = this.page + 1;
                }
                this.pt()
            },
            last() {
                var number = Math.round(this.total / this.size)
                this.page = number;
                this.pt()
            }
        }
    })
</script>

</body>

</html>
